<template>
    <el-dialog :visible.sync="open" width="75%" append-to-body>
         <div slot="title" class="dialog-title">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="角色信息" name="1"></el-tab-pane>
                <el-tab-pane label="授权对象" name="2"></el-tab-pane>
                <el-tab-pane label="管理平台功能授权" name="3"></el-tab-pane>
                <el-tab-pane label="业务平台功能授权" name="4"></el-tab-pane>
            </el-tabs>
        </div>
        <el-row class="margin-top-sm padding-left padding-right height500">
          <el-col :span="24">
            <div v-if="activeName == '1'">
                <div class="back_wapper margin-top-xs">角色信息</div>
                <div class="back_wapper margin-top-xs wapper flex">
                    <div>角色名称</div>
                    <div class="margin-left-lg">{{role.name}}</div>
                </div>
                <div class="back_wapper wapper flex">
                    <div>角色编码</div>
                    <div class="margin-left-lg">{{role.code}}</div>
                </div>
                <div class="back_wapper wapper wapper-bt flex">
                    <div>描述</div>
                    <div class="margin-left-lg">{{role.remark}}</div>
                </div>
            </div>


             <div v-if="activeName == '2'">
                <div class="back_wapper margin-top-xs">授权对象(人员)</div>
                <div class="back_wapper back_height wapper-bt margin-top-xs flex flex-wrap" style="background-color: #FFFFFF;padding:0" >
                    <div class="margin-left" v-for="item in form.userRoleResDO" :key="item.id">{{item.nickname}} {{item.mobile?(item.mobile):''}}</div>
                </div>
                <div class="back_wapper margin-top-xs">授权对象(用户组)</div>
                <div class="back_wapper back_height wapper-bt margin-top-xs flex flex-wrap" style="background-color: #FFFFFF;padding:0" >
                    <div class="margin-left" v-for="item in form.userRoleGroupResDO" :key="item.id">{{item.groupName}}</div>
                </div>
            </div>

            <div v-if="activeName == '3'">
              <el-table ref="table" :data="list" show-overflow-tooltip class="margin-top">
                <el-table-column label="页面名称" prop="name" :show-overflow-tooltip="true"/>
                <el-table-column label="操作权限" prop="operateType">
                  <template v-slot="scope">
                   <span>{{scope.row.hasOperateButton==0?'查看':'查看&操作'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="数据范围" prop="dataScopeDesc" >
                  <!-- <template v-slot="scope">
                    <template  v-if="scope.row.type == 2">
                      <span>{{roletypes[scope.row.dataScopeDesc]}}</span>
                    </template>
                </template> -->
                </el-table-column>
              </el-table>
            </div>

            <div v-if="activeName == '4'">
              <el-table ref="table" :data="list" show-overflow-tooltip class="margin-top">
                <el-table-column label="页面名称" prop="name" :show-overflow-tooltip="true"/>
                <el-table-column label="操作权限" prop="operateType">
                  <template v-slot="scope">
                   <span>{{scope.row.hasOperateButton==0?'查看':'查看&操作'}}</span>
                  </template>
                </el-table-column>
                  <el-table-column label="数据范围" prop="dataScopeDesc" >
                  <!-- <template v-slot="scope">
                    <template  v-if="scope.row.type == 2">
                      <span>{{roletypes[scope.row.dataScopeDesc]}}</span>
                    </template>
                </template> -->
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick type="primary" @click="open = false" >确 定</el-button>
          <el-button v-preventReClick @click="open = false">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {
  getRole,listRoleUsers,getRoleFunctionAuthority
} from "@/api/common/role";
export default {
  props: {
    // list:{
    //     type:Array,
    //     default:[]
    // }
  },
  data() {
    return {
      open: false,
      activeName:"1",
      form:{},
      role:{},
      list:[],
      id:undefined,
    }
  },
  methods: {
    init(id){
      this.activeName = '1'
      this.open = true;
      this.id = id
      this.handleClick(this.activeName)
    },
    //切换
    async handleClick(){
      console.log(this.activeName);
      const num = this.activeName
      if(!this.id)return this.$message.error('暂未查询到角色')
      const { id } = this
      if(num == 1){
          let {data} = await getRole({id})
          this.role = data;
      }else if(num == 2){
          let {data} = await listRoleUsers({roleId:id})
          console.log(data,'---11')
          this.form = data;
      }else if(num == 3){
        getRoleFunctionAuthority({roleId:id,label:2}).then(response=>{
        this.list = response.data.filter(v => v.checked == true)
        console.log(this.list,'------',response.data)
      })
      }else if(num == 4){
        getRoleFunctionAuthority({roleId:id,label:1}).then(response=>{
        console.log(response.data,'--2----')
        this.list = response.data.filter(v => v.checked == true)  
        console.log(this.list,'----333--')
      })
    }
    },
  },
  created() {}
};
</script>
<style scoped lang="scss">
.height500{
  height: 400px;
}
::v-deep .el-dialog__header{
    border-bottom:none
}
.back_wapper{
    background-color: #f8f8f9;
    border: 1px solid #dfe6ec;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
    padding: 0 20px;
    line-height: 40px;
}
.back_height{
    height: auto;
}
.wapper{
    background-color: #FFFFFF;
    border-bottom: 0;
    >div:first-child{
        width: 100px;
        border-right: 1px solid #dfe6ec;
        padding: 0 20px 0 0px;
    }
}
.wapper-bt{
    border-bottom: 1px solid #dfe6ec !important;
}

</style>